﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewDocExcel.aspx.cs" Inherits="ViewDocExcel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        body  {
            font : normal 11px tahoma, arial, helvetica, sans-serif;
        }
        
        #item-ct table { width : 100% !important; }
        
        #item-ct th {
            background : #F0F4F5 url(/extjs/resources/images/default/toolbar/bg-gif/ext.axd) repeat-x scroll left top;
            font-weight : bold;
            padding : 8px 5px;
        }
       
        #item-ct td {
            padding : 5px;
            border-bottom : 1px solid silver;
        }
        
        #item-ct .letter-row {
            padding-top : 15px;
            border : none;
        }
        
        #item-ct .letter-row h2 { font-size : 2em; }
        
        #item-ct .header { padding : 10px 0px 10px 5px; }
        
        #item-ct .header p { font-size : 2em; }

        #item-ct .header a { margin-bottom : 10px; }
        
        .item-name-over {
            cursor : pointer;
            background-color : #efefef;
        }
        
        #item-ct .letter-row div {
            border-bottom : 2px solid #99bbe8;
            cursor : pointer;
            background : transparent url(/extjs/resources/images/default/grid/group-expand-sprite-gif/ext.axd) no-repeat 0px -42px;
            margin-bottom : 5px;
        }

        #item-ct .letter-row div h2  { padding-left : 18px; }

        #item-ct .letter-row div.collapsed { background-position : 0px 8px; }
        
        #item-ct tr.collapsed { display : none; }
        
        .customer-label {
            font-weight : bold;
            font-size : 12px;
            padding : 5px 0px 5px 28px;            
            width : 150px;
        }
    </style>
      <script type="text/javascript">
          var viewClick = function (dv, e) {
              var group = e.getTarget("h2.letter-selector");

              if (group) {
                  Ext.fly(group).up("div").toggleClass("collapsed");
                  Ext.select("#item-ct tr.l-" + group.innerHTML).toggleClass("collapsed");
              }
          };

          var nodeClick = function (view, index, node, e) {
              var nd = Ext.fly(node).first("td");

              DataViewContextMenu.node = {
                  id: nd.getAttributeNS("", "custID"),
                  name: nd.getAttributeNS("", "custName"),
                  email: nd.getAttributeNS("", "email"),
                  contact: nd.dom.innerHTML
              };

              DataViewContextMenu.showAt(e.getXY());
          };
    </script>
</head>
<body>
<form id="form1" runat="server">

    <ext:ResourceManager  runat="server" />
    <script type="text/javascript" language="javascript" src="../resources/utilidades.js"></script>
    <ext:Store ID="dsReport" runat="server">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="Letter" />
                        <ext:RecordField Name="Item" IsComplex="true" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
     </ext:Store>
  <ext:Panel ID="Panel1" BodyStyle="padding:15px;background-color:#E7E4DD;" runat="server"
        AutoHeight="true">
        <Items>
            <ext:Panel ID="Panel2" runat="server" BodyStyle="background-color:Transparent;" Layout="Column" Height="45">
                <Items>
                    <ext:Panel ID="Panel3" runat="server" Border="false" Header="false" BodyStyle="padding:10px;background-color:Transparent;"
                        ColumnWidth=".33" Layout="Form">
                        <Items>
                            <ext:ComboBox Editable="false" FieldLabel="Año" ID="cbxAnyo"  runat="server" AllowBlank="false"
                          TypeAhead="true" ForceSelection="true"
                                AnchorHorizontal="95%" TriggerAction="All" Grow="true" GrowMax="300" EmptyText=""
                                SelectOnFocus="true" AutoDataBind="True">
                                                 <Items>
                                                        <ext:ListItem Text="2012" Value="2012" />
                                                        <ext:ListItem Text="2013" Value="2013" />
                                                        <ext:ListItem Text="2014" Value="2014" />
                                                        <ext:ListItem Text="2015" Value="2015" />
                                                        <ext:ListItem Text="2016" Value="2016" />
                                                        <ext:ListItem Text="2017" Value="2017" />
                                                    </Items>
                                <Triggers>
                                        <ext:FieldTrigger Icon="Clear" />
                                    </Triggers>
                                    <Listeners>
                                         <Select Handler="this.triggers[0].show();" />
                                          <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                         <AfterRender Handler="this.triggers[0][ Ext.isEmpty(this.getValue()) ? 'hide' : 'show']();" />
                                            <TriggerClick Handler="if(index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                    </Listeners>
                            </ext:ComboBox>
                       
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel4" runat="server" Border="false" Header="false" BodyStyle="padding:10px;background-color:Transparent;"
                        ColumnWidth=".33" Layout="Form">
                        <Items>
                         
                            <ext:ComboBox Editable="false" FieldLabel="Mes" ID="cbxMes" runat="server"
                                AnchorHorizontal="95%"  
                                TypeAhead="true" ForceSelection="true" TriggerAction="All" Grow="true" GrowMax="300"
                                EmptyText="Todos" SelectOnFocus="true" AutoDataBind="True">
                                                 <Items>
                                                        <ext:ListItem Text="Todos" Value="" />
                                                        <ext:ListItem Text="Enero" Value="Enero" />
                                                        <ext:ListItem Text="Febrero" Value="Febrero" />
                                                        <ext:ListItem Text="Marzo" Value="Marzo" />
                                                        <ext:ListItem Text="Abril" Value="Abril" />
                                                        <ext:ListItem Text="Mayo" Value="Mayo" />
                                                        <ext:ListItem Text="Junio" Value="Junio" />
                                                        <ext:ListItem Text="Julio" Value="Julio" />
                                                        <ext:ListItem Text="Agosto" Value="Agosto" />
                                                        <ext:ListItem Text="Septiembre" Value="Septiembre" />
                                                        <ext:ListItem Text="Octubre" Value="Octubre" />
                                                        <ext:ListItem Text="Noviembre" Value="Noviembre" />
                                                        <ext:ListItem Text="Diciembre" Value="Diciembre" />
                                                    </Items>
                               <Triggers>
                                        <ext:FieldTrigger Icon="Clear" />
                                    </Triggers>
                                    <Listeners>
                                         <Select Handler="this.triggers[0].show();" />
                                          <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                         <AfterRender Handler="this.triggers[0][ Ext.isEmpty(this.getValue()) ? 'hide' : 'show']();" />
                                            <TriggerClick Handler="if(index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                    </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
            <ext:Panel ID="Panel6" runat="server" AutoHeight="true" BodyStyle="padding-top:15px;background-color:Transparent;"
                Border="false">
                <Content>
                    <center>
                        <ext:Button runat="server" ID="btnBuscar" Text="Buscar" Icon="Find">
                   
                        <DirectEvents>
                            <Click Before="return ValidarCampos();" OnEvent="btnBuscar_Click">
                                <EventMask ShowMask="true" />
                            </Click>
                        </DirectEvents>
                          
                        </ext:Button>
                    </center>
                </Content>
            </ext:Panel>
        </Items>
    </ext:Panel>
      <ext:Toolbar ID="Toolbar1" runat="server">
        <Items>
            <ext:Button ID="Button1" runat="server" Text="Print" Icon="Printer" OnClientClick="window.print();" />
        </Items>
    </ext:Toolbar>
    <ext:DataView ID="DataView1" 
        runat="server" 
        StoreID="dsReport" 
        SingleSelect="true"
        ItemSelector="tr.customer-record" 
        OverClass="cust-name-over"
        EmptyText="Sin datos">
        <Template ID="Template1" runat="server">
            <Html>
				<div id="item-ct">
					<div class="header">
						<p></p>                                                                        
					</div>
					<table>
						<tr>
							<th>Mes</th>
							<th>Ingreso</th>
							<th>Egreso</th>
							<th>Saldo</th>
							
						</tr>
					
						<tpl for=".">
								<tr>
									<td class="letter-row" colspan="6">
										<div><h2 class="letter-selector">{Letter}</h2></div>
									</td>
								</tr>
								<tpl for="Item">
									<tr class="item-record l-{parent.Letter}">
										<td class="item-name">{Mes}</td>
										<td>&nbsp;{Ingreso}</td>
										<td>&nbsp;{Egreso}</td>
										<td>&nbsp;{Saldo}</td>
										
									</tr>
								</tpl>
						</tpl>                    
					</table>
				</div>
			</Html>
        </Template>
        <Listeners>
            <ContainerClick Fn="viewClick" />
            <Click Fn="nodeClick" />
        </Listeners>
    </ext:DataView>
   
    </form>
</body>
</html>
  <ext:XScript ID="XScript1" runat="server">
<script type="text/javascript" language="javascript">
    function ValidarCampos()
    {
        if (U_ValidarCampo(#{cbxAnyo},'Año es requerido'))
                return true;
        return false;    
    };</script>
    </ext:XScript>